<template>
  <div>
    <a-modal :visible="visible" @before-open="open" :on-before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="700px" :mask-closable="false">
      <template #title> {{ title }} </template>
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form">
          <a-space direction="vertical" :size="24">
            <a-row>
              <a-col :span="10">
                <a-form-item field="warehouseName" label="仓库名称" :rules="rules.warehouseName">
                  <a-input v-model="form.warehouseName" placeholder="请输入" allow-clear max-length="20" show-word-limit />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="stockType" label="存货类型" :rules="rules.stockType">
                  <a-select placeholder="请选择" allow-clear v-model="form.stockType">
                    <a-option v-for="item of options" :label="item.label" :value="item.vlaue"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item field="status" label="状态" :rules="rules.status">
                  <a-switch v-model="form.status" :disabled="detail.type == 'edit' && form.isDefault">
                    <template #checked> 开 </template>
                    <template #unchecked> 关 </template>
                  </a-switch>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="10">
                <a-form-item field="warehouseAttribute" label="仓库属性" :rules="rules.warehouseAttribute">
                  <a-radio-group v-model="form.warehouseAttribute" :disabled="detail.type == 'edit' && form.isDefault">
                    <a-radio :value="1">国内仓</a-radio>
                    <a-radio :value="2">海外仓</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="14">
                <a-form-item field="userIds" label="管理员">
                  <a-select v-model="form.userIds" multiple max-tag-count="2" placeholder="请选择" allow-clear>
                    <a-option v-for="item of userList" :label="item.userName" :value="item.id"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col v-if="form.warehouseAttribute == 2">
                <a-form-item field="replenishPoint" label="可补货站点">
                  <a-checkbox-group v-model="form.replenishPoint">
                    <a-checkbox :value="item.marketplaceCode" v-for="item of shopMarkList">{{ item.marketplaceCode }}</a-checkbox>
                  </a-checkbox-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item field="receiver" label="收件人" :rules="rules.receiver">
                  <a-input v-model="form.receiver"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="receiverMobile" label="手机号" :rules="rules.receiverMobile">
                  <a-input v-model="form.receiverMobile"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item field="country" label="国家" :rules="rules.country">
                  <a-select v-model="form.country" placeholder="请选择" @change="changeCountry" allow-clear allow-search>
                    <a-option v-for="item of countriesOptions" :label="item.name" :value="item.name"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="province" label="省/州" :rules="rules.province">
                  <a-input v-model="form.province"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item field="city" label="城市" :rules="rules.city">
                  <a-input v-model="form.city"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="postalCode" label="邮编" :rules="rules.postalCode">
                  <a-input v-model="form.postalCode"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col>
                <a-form-item field="address" label="详细地址" :rules="rules.address">
                  <a-input v-model="form.address"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-space>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { getOrganizesUser } from '@/api/system'
  import { stockOptions } from '../options'
  import { marketPlaceList } from '@/utils/globalData'
  import { countriesOptions } from '@/utils/countries'
  import { createWarehouse, updateWarehouse } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'
  import _ from 'lodash-es'
  import { done } from 'nprogress'
  export default defineComponent({
    props: ['detail', 'shopMarkList'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        form: {
          status: true,
          warehouseAttribute: '1',
          countryCode: '',
        },
        rules: {
          warehouseName: [{ required: true, message: '请输入仓库名称' }],
          stockType: [{ required: true, message: '请选择存货类型' }],
          warehouseAttribute: [{ required: true, message: '请选择仓库属性' }],
          receiver: [{ required: true, message: '请输入收件人' }],
          receiverMobile: [{ required: true, message: '请输入收件人手机号' }],
          country: [{ required: true, message: '请选择国家' }],
          province: [{ required: true, message: '请输入省/州' }],
          city: [{ required: true, message: '请输入城市' }],
          postalCode: [{ required: true, message: '请输入邮编' }],
          address: [{ required: true, message: '请输入详细地址' }],
        },
        options: stockOptions(),
        siteList: props.shopMarkList,
        countriesOptions: countriesOptions,
        userList: [],
      })
      const title = computed(() => {
        if (props.detail.type == 'add') {
          return '新增仓库'
        } else {
          return '编辑仓库'
        }
      })

      const handleOk = (done: any) => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            let params = _.cloneDeep(data.form)
            console.log(params)

            params.status ? (params.status = 1) : (params.status = 0)
            params.replenishPoint ? (params.replenishPoint = params.replenishPoint.join(',')) : ''
            try {
              let res: any = {}
              if (props.detail.type == 'add') {
                res = await createWarehouse(params)
              } else {
                res = await updateWarehouse(params)
              }
              if (res.code == 'SUCCESS') {
                props.detail.type == 'add' ? Message.success('新增成功') : Message.success('编辑成功')
                data.form = {
                  status: true,
                  warehouseAttribute: 1,
                  countryCode: '',
                }
                formRef.value.resetFields()
                visible.value = false
                emit('save')
              }
              done(true)
            } catch (error) {
              done(true)
            }
          } else {
            done(true)
          }
        })
      }

      const open = () => {
        getUserList()
        if (props.detail.type == 'edit') {
          data.form = _.cloneDeep(props.detail.data)
          data.form.replenishPoint = data.form.replenishPoint.split(',')
          data.form.userIds = data.form.managers.map((e: any) => e.userId)
          data.form.status = Boolean(data.form.status)
        }
      }

      const handleCancel = () => {
        formRef.value.resetFields()
        data.form = {
          status: true,
          warehouseAttribute: 1,
          countryCode: '',
        }
        visible.value = false
      }
      const getUserList = async () => {
        let params = {
          depart: false,
          pageNum: 1,
          pageSize: 1000,
        }
        const res: any = await getOrganizesUser(params)
        if (res.code == 'SUCCESS') {
          data.userList = res.data.records
        }
      }
      const changeCountry = (val: string) => {
        let obj: any = countriesOptions.find((e) => e.name == val)
        data.form.countryCode = obj.short
      }
      return {
        ...(toRefs(data) as any),
        visible,
        changeCountry,
        formRef,
        title,
        open,
        handleOk,
        handleCancel,
      }
    },
  })
</script>

<style lang="less" scoped></style>
